<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/echarts.min.js"></script>
    <style>
        #main {
            border: 5px solid darkblue;
        }
    </style>
</head>

<body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script>
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // title,legend,tooltip,series 
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '主标题',
                show: true,//设置标题是否显示
                textStyle: {
                    color: 'red',
                    fontSize: '30'
                },
                subtext: '副标题'
            },
            tooltip: {
                show: true
            },
            legend: {
                data: ['销量', '价格'],
                // show: false
            },
            xAxis: {
                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
                axisLine: {
                    // show: false
                    lineStyle: {
                        width: 4,
                        color: 'red',
                        type: 'dashed'
                    }
                }
            },
            yAxis: {
                axisLine: {
                    show: true,
                    lineStyle: {
                        width: 4,
                        color: 'red',
                        type: 'dashed'
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: 'blue'
                    }
                }
            },
            series: [
                {
                    name: '销量',
                    type: 'line',//图表的类型 line 折线图 pie 饼图 bar 柱状图
                    data: [5, 25, 36, 17, 10, 20],
                    lineStyle: {
                        width: 5
                    },
                    areaStyle: {
                        color: 'lime'
                    },
                    symbolSize: 10
                },
                // {
                //     name: '价格',
                //     type: 'bar',
                //     data: [15, 20, 26, 30, 5, 20]
                // }
            ],
            grid: {
                left: '10%',
                top: '20%',
                backgroundColor: '#ccc',
                show: true
            },
            color: ['red', 'purple']

        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>

</html>